<template>
  <!-- 曲线图 -->
<div class="chart-container" :style="position">
      <div :id="id" class="chart-main">
      </div>
      <div class="item-list">
        <span class="item active" @click="setClass($event)">日</span>
        <span class="item" @click="setClass($event)">周</span>
        <span class="item" @click="setClass($event)">月</span>
      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted, reactive,watch} from 'vue'
export default {
  name:'CurveLineChart',
  props:{
    data:{
      type:String,
      default:'hhh'
    },
    info: {
      type: Object,
      default: () => ({})
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    const id = 'curveline-main'+Number(Math.random()*100).toFixed(4)
    const data = {day:[ ['2019-10-10', 20],
                ['2019-10-11', 50],
                ['2019-10-12', 70],
                ['2019-10-13', 50],
                ['2019-10-14', 20],
                ['2019-10-15', 30],
                ['2019-10-16', 40],],
                week:[['2019-10-10', 20],
                ['2019-10-11', 5],
                ['2019-10-12', 7],
                ['2019-10-13', 5],
                ['2019-10-14', 2],
                ['2019-10-15', 3],
                ['2019-10-16', 4],],
                mouth:[['2019-10-10', 520],
                ['2019-10-11', 590],
                ['2019-10-12', 790],
                ['2019-10-13', 590],
                ['2019-10-14', 290],
                ['2019-10-15', 390],
                ['2019-10-16', 490],]
    }  //假数据，需要替换
    let option = {}
    let myChart;
    onMounted(()=>{
      myChart = echarts.init(document.getElementById(id));
      option = reactive({
          title:{
              text:'活跃人数',
              textStyle: {
                fontSize: 14,
                color: "#74bdff"
              },
              left:'5%',
              top:'3%',
              subtext:'人数/日期',
                  subtextStyle:{
                      fontSize: 12,
                      color: "#7585a7"
                  },
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              splitLine:{
                show:true,
                lineStyle:{
                  color:"#47557d",
                }
              },
              axisTick:{
                  show: false
              },
              axisPointer: {
                  label: {
                      formatter: function (params) {
                          return params.value+'活跃人数  ' 
                              + (params.seriesData.length ? '：' + params.seriesData[0].data[1] : '');
                      }
                  },
                  // snap:true
              },
          },
          yAxis: {
              type: 'value',
              boundaryGap: [0, '10%'],
              position: 'left',
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: "#47557d",
                  }
              },
              splitLine:{
                lineStyle:{
                  color:"#47557d",
                }
              }
          },
          tooltip: {
              trigger: 'axis',
          },
          series: [
              {
                  type: 'line',
                  smooth: true,
                  showSymbol:false,
                  lineStyle: {
                      width:4,
                      color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 1,
                            color: 'rgba(129, 123, 247,1)'
                        }, {
                            offset: 0,
                            color: 'rgba(1, 191, 236,1)'
                        }])
                  },
                  areaStyle: {
                      opacity: 0.8,
                      color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
                          offset: 1,
                          color: 'rgba(1, 191, 236,0)'
                      }, {
                          offset: 0,
                          color: 'rgba(129, 123, 247,1)'
                      }])
                  },
                  data: data.day
              }
          ]
      })
      create() 
    })
    function setClass(e){
      document.querySelectorAll('.item').forEach(item=>{
        item.className = 'item'
      })
      e.target.className= 'item active'
      if (e.target.innerText === '日') {
        option.series[0].data = data.day
      }else if (e.target.innerText === '周') {
        option.series[0].data = data.week
      }else if (e.target.innerText === '月') {
        option.series[0].data = data.mouth
      }
      myChart.setOption(option)
      // console.log(data);
      // console.log(e.target,e.target.innerText);
    }
    const create = ()=>{
      myChart.setOption(option)
    }
    watch(
        () => props.info?.size,
        () => {
            myChart.dispose() //重置echart
            myChart = null
            myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option)
        },
        { deep: true,}
    );
    return{
      position,
      id,
      setClass
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
    i{
      width: 20px;
      height: 20px;
      position: absolute;
      // display: block;
    }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
}
.chart-main{
  width: 100%;
  height: 100%;
}
.item-list{
  position: absolute;
  top: 12px;
  left: 100px;
  color: #47557d;
  font-size: 12px;
  line-height: 18px;
  .item{
    display: inline-block;
    background-color: transparent;
    padding: 0 10px;
    margin: 0 5px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
  }
  .active{
    color: #fff;
    background-color: #74beff;
  }
}
</style>